<template>
	<view>
		<u-popup :show="show" mode="bottom" closeable @close="close">
			<view class="box padding margin-bottom-xl" v-if="payTypeList.length>0">
				<view class="text-center text-lg">请选择支付方式</view>
				<view class="margin-top text-center pay-price">
					<text class="text-red">¥</text>
					<text class="text-red padding-left-money">{{ Math.abs(price) }}</text>
				</view>
				<view class="cu-list menu margin-top">
					<view class="cu-item solid-bottom" v-if="payTypeList.includes('money')">
						<view class="content padding-tb-sm">
							<view class="pay-icon">
								<image src="@/static/image/order/balance.png" mode=""></image>
								<text class="padding-left-xs">余额支付</text>
								<text class="text-gray">（余额：¥{{USERINFO.money}}）</text>
							</view>
						</view>
						<view class="action">
							<u-radio-group v-model="selectedOption">
								<u-radio name="money" activeColor="var(--theme-color)"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cu-item" v-if="payTypeList.includes('wxpay')">
						<view class="content padding-tb-sm">
							<view class="pay-icon">
								<image src="@/static/image/order/wepay.png" mode=""></image>
								<text class="padding-left-xs">微信支付</text>
							</view>
						</view>
						<view class="action">
							<u-radio-group v-model="selectedOption">
								<u-radio name="wxpay" activeColor="var(--theme-color)"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<!-- #ifdef H5 -->
					<view class="cu-item" v-if="payTypeList.includes('alipay')">
						<view class="content padding-tb-sm">
							<view class="pay-icon">
								<image src="@/static/image/order/wepay.png" mode=""></image>
								<text class="padding-left-xs">支付宝</text>
							</view>
						</view>
						<view class="action">
							<u-radio-group v-model="selectedOption">
								<u-radio name="alipay" activeColor="var(--theme-color)"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="cu-item" v-if="payTypeList.includes('epay')">
						<view class="content padding-tb-sm">
							<view class="pay-icon">
								<image src="@/static/image/order/wepay.png" mode=""></image>
								<text class="padding-left-xs">易支付</text>
							</view>
						</view>
						<view class="action">
							<u-radio-group v-model="selectedOption">
								<u-radio name="epay" activeColor="var(--theme-color)"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<!-- #endif -->
				</view>
				<view class="submit">
					<view class="flex flex-direction">
						<button class="cu-btn china-btn-bg lg round" @click="submit()">确认支付</button>
					</view>
				</view>
			</view>
			<emptyData type="notOrder" top="10" v-else text="暂无可用支付方式"></emptyData>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		ordersType: {
			type: String,
			default: '',
		},
		price: {
			type: [String,Number],
			default: '',
		}
	},
	computed: {
		...mapState({
			USERINFO: state => state.USER.USERINFO,
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	data() {
		return {
			payTypeList: [],
			selectedOption: ''
		};
	},
	created() {
		this.initPayType();
		const pay_type = this.$utils.useStorage().get('payType');
		if (pay_type) {
			this.selectedOption = pay_type;
		}
	},
	methods: {
		initPayType() {
			if (this.WEBCONFIG.money_state&&this.WEBCONFIG.money_orders_type.includes(this.ordersType)) {
				this.payTypeList.push('money')
			}
			// #ifdef H5
			if (this.WEBCONFIG.wxpay_state && this.$utils.$system.isWechat()) {
				this.payTypeList.push('wxpay')
				this.selectedOption = 'wxpay'
			}
			if (this.WEBCONFIG.alipay_state) {
				this.payTypeList.push('alipay')
				if (!this.selectedOption) {
					this.selectedOption = 'alipay'
				}
			}
			if (this.WEBCONFIG.epay_state) {
				this.payTypeList.push('epay')
				if (!this.selectedOption) {
					this.selectedOption = 'epay'
				}
			}
			// #endif
			// #ifdef MP-WEIXIN
			if (this.WEBCONFIG.wxpay_state) {
				this.payTypeList.push('wxpay')
				this.selectedOption = 'wxpay'
			}
			// #endif
		},
		submit() {
			this.$utils.useStorage().set('payType', this.selectedOption)
			this.$emit('payCallBack', this.selectedOption)
		},
		close(e) {
			this.$emit('payCallBack')
		},
		//延长服务
		sendTable() {
			let self = this;
			let params = self.referParams;
			params.payType = self.selectedOption;
			uni.navigateTo({
				url: '/pages/table/payment/result?source=addOrder&orderId=' + res.data.order.order_id
			})
		},
	}
}
</script>

<style lang="less">
.box {
	.pay-price {
		font-size: 49upx;
	}

	.pay-icon {
		image {
			width: 60upx;
			height: 60upx;
		}
	}

	.submit {
		width: 90%;
		margin: 30upx auto;
	}
}

.padding-left-money {
	padding-left: 4upx;
}

.u-popup {
	position: absolute !important;
}</style>
